<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="include::head"></head>
<body>
<div class="layui-anim layui-anim-upbit layui-fluid">
    <div class="layui-row layui-col-space15 table-search">
        <div class="layui-col-md12">
            <form class="layui-form" id="from-search">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="请输入角色名称" name="roleName" autocomplete="off">
                    </div>

                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="请输入角色标识" name="roleRoute" autocomplete="off">
                    </div>

                    <div class="layui-input-inline">
                        <div class="layui-inline">
                            <select name="isState" th:with="word=${diy['request_state_type']}">
                                <option value="">全部状态</option>
                                <option th:each="value : ${word}" th:value="${value.dictionaryRoute}" th:utext="${value.dictionaryName}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="开始日期" autocomplete="off" name="startTime" id="startTime">
                    </div>
                    <input id="deptIds" name="deptIds" type="hidden" />
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="截止日期" autocomplete="off" name="endTime" id="endTime">
                    </div>
                    <button class="layui-btn" id="form-submit" lay-submit  lay-filter="search">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <button class="layui-btn" lay-filter="refresh">
                        <i class="layui-icon layui-icon-refresh"></i>
                    </button>

                </div>
            </form>
            <div class="layui-btn-group" lay-filter="button-demo">
                <th:block th:each="button : ${button}" th:if="${button.type == 'tool_button'}">
                    <th:block th:if="${button.eventType == 'event_export'}">
                        <a th:class="${button.perClass +' '+ button.eventType}" th:href="${button.perHref}" th:utext="${button.perName}"></a>
                    </th:block>
                    <th:block th:if="${button.eventType != 'event_export'}">
                        <button th:class="${button.perClass +' '+ button.eventType}" th:href="${button.perHref}" th:value="${button.perName}" th:utext="${button.perName}"></button>
                    </th:block>
                </th:block>
            </div>

            <table class="layui-hide" id="table" lay-filter="demo"></table>
        </div>
    </div>
</div>
<div th:include="include::onload"></div>
<script type="text/html" id="barDemo">
    <button th:each="button : ${button}" th:if="${button.type == 'menu_button'}" th:class="${button.perClass}" th:href="${button.perHref}" th:lay-event="${button.eventType}" th:value="${button.perName}" th:utext="${button.perName}"><i th:class="${button.perIcon}"></i></button>
</script>
<script  th:inline="javascript">
    layui.config({
        base: '/js/layer/module/'//模块存放的目录
    }).use(['tabular'], function(){
        var tabular = layui.tabular;
        var statetype = [[${diy['state_type']}]];
        var url = "/admin/system/role"
        var options = {
            elem: '#table',
            url:url,
            onlyId:"roleId",
            method:'post',
            id:'role-table',
            height: 'full-150',
            cellMinWidth: 220,
            orderBy:'add_date',
            rule:'desc',
            cols:[
                [
                    {type:'numbers',title: '序号', fixed: 'left'}
                    ,{field:'roleName',fixed: 'left',title: '角色名称', sort: true}
                    ,{field:'roleRoute',title: '角色标识',sort: true}
                    ,{field:'isState',align:'center', title: '角色状态',sort: true,templet: function (option) {
                        return $.common.initState(statetype,option.isState,option.roleId);
                    }}
                    ,{field:'remarks', title: '备注',sort: true}
                    ,{field:'addDate', title: '创建时间',fixed: 'right', sort: true,templet: function (option) {
                        return $.date.stringDate(option.addDate);
                    }}
                    ,{width:'10%', align:'center',fixed: 'right', toolbar: '#barDemo'}
                ]
            ],
            ispage:true
        };
        //初始化表格
        tabular.init(options);
        //监听搜索
        tabular.search();
        //工具按钮监听
        tabular.button();
        //开关按钮监听
        tabular.switch(url+"/update");
    });
</script>
</body>
</html>